<template>
  <div class="dict">
    <div class="custom-tree-container">
      <div class="block">
        <el-tree
          :data="folderList"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
        ></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
let id = 1000;

export default {
  name: "Role",
  data() {
    return {
      folderList: []
    };
  },
  mounted() {
    this.getFolderList();
  },

  methods: {
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      // console.log("新增文件夹后的父级文件夹",data);
      this.appendFolder(data);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      // console.log("删除文件夹的id",data.id);
      this.removeFolder(data);
    },

    getNode(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      console.log("edit", children);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.getNode(node, data)}
            >
              Edit
            </el-button>
          </span>
        </span>
      );
    },

    //请求获取文件夹列表
    getFolderList() {
      this.http.post("/api/document/folder/tree").then(res => {
        console.log(res);
        let tempList = res.data.data;
        this.folderList = this.handleArr(tempList);
        // console.log(this.folderList);
      });
    },

    //处理获取到的文件夹列表
    handleArr(arr) {
      var newArr = [];
      arr.map(e => {
        let temp = this.handleObj(e);
        newArr.push(temp);
      });
      return newArr;
    },
    //处理文件夹列表中的子文件夹
    handleObj(obj) {
      if (obj.items.length > 0) {
        let children = this.handleArr(obj.items);
        return {
          id: obj.id,
          label: obj.name,
          children
        };
      }
      return {
        id: obj.id,
        label: obj.name
      };
      let json = this.handleArr(arr);
    },
    //发送请求上传新增文件夹
    appendFolder(data) {
      let parentId = data.id;
      let name = data.children[0].label;
      this.http
        .post("api/document/folder/save", { parentId, name })
        .then(res => {
          // console.log(res);
          this.getFolderList();
        });
    },
    //发送请求移除对应文件夹
    removeFolder(data) {
      let ids = data.id;
      this.http
        .post("api/document/folder/deleteBatchIds", { ids })
        .then(res => {
          // console.log(res);
          this.getFolderList();
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.dict {
  padding: 0 10px;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
